<?php 
if($session->check('Auth.User.id')){
	if($session->read('Auth.User.group') == 'admin' || $session->read('Auth.User.group') == 'manag')
	echo $this->element('toolbar',array('plugin' => 'gallery','category_id'=>$category_id));
}

if($session->check('Auth.User.id')){
	if($session->read('Auth.User.group') == 'admin' || $session->read('Auth.User.group') == 'manag')
	$this->Html->styleBlock("
		ul.file_toolbar { display: block; position: absolute; background: url(../../img/firma/bg_toolbar.png) repeat; margin: ".($params['border']+3)."px;  z-index: 1000; float: none; }
		ul.file_toolbar li { display: block; float: left; width: 16px; height: 16px; margin: 3px; padding: 2px; background: url(../../img/firma/bg_toolbar.png) repeat; }
		ul.file_toolbar li a { display: block; padding: 0px; margin: 0px; width: 16px; height: 16px; }
		ul.file_toolbar li a img { padding: 0px; margin: 0px;  }
		ul.file_toolbar li:hover { background: #fff; }
	",array('inline'=>false));
}?>

<?php		
echo $javascript->codeBlock("

hs.graphicsDir = '/css/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
 
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: true,
	useControls: true,
	overlayOptions: {
		position: 'bottom right',
		offsetY: 50
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});
 
// Options for the in-page items
var inPageOptions = {
	//slideshowGroup: 'group1',
	outlineType: null,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	thumbnailId: 'gallery-area',
	useBox: true,
	width: 600,
	height: 500,
	targetX: 'gallery-area 10px',
	targetY: 'gallery-area 10px',
	captionEval: 'this.a.title',
	numberPosition: 'caption'
};
 

 
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	if (/in-page/.test(this.wrapper.className))	return hs.next();
};
 
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
	if (/in-page/.test(this.wrapper.className))	return false;
};
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
	if (/in-page/.test(this.wrapper.className))	return false;
};
 
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
	var i, exp;
	hs.getPageSize();
 
	for (i = 0; i < hs.expanders.length; i++) {
		exp = hs.expanders[i];
		if (exp) {
			var x = exp.x,
				y = exp.y;
 
			// get new thumb positions
			exp.tpos = hs.getPosition(exp.el);
			x.calcThumb();
			y.calcThumb();
 
			// calculate new popup position
		 	x.pos = x.tpos - x.cb + x.tb;
			x.scroll = hs.page.scrollLeft;
			x.clientSize = hs.page.width;
			y.pos = y.tpos - y.cb + y.tb;
			y.scroll = hs.page.scrollTop;
			y.clientSize = hs.page.height;
			exp.justify(x, true);
			exp.justify(y, true);
 
			// set new left and top to wrapper and outline
			exp.moveTo(x.pos, y.pos);
		}
	}
});
",$options = array('allowCache'=>false,'safe'=>true,'inline'=>false));
?>

<?php  
echo $this->Html->styleBlock("
	.highslide-image {
		border: 1px solid black;
	}
	.highslide-controls {
		width: 90px !important;
	}
	.highslide-controls .highslide-close {
		display: none;
	}
	.highslide-caption {
		padding: .5em 0;
	}
",array('inline'=>false));
?>

<div id="gallery-area" style="width: 620px; height: 600px; margin: 0 auto; border: 1px solid silver"> 
	<div class="hidden-container"> 
		<?php if(is_array($items) && !empty($items)){?>
		<?php	
			debug($items);	
			$first = (isset($items[0]['Upload']['id'])) ? 'thumb'.$items[0]['Upload']['id'] : 'thumb3';
			
			echo $javascript->codeBlock("		
			// Open the first thumb on page load
			hs.addEventListener(window, 'load', function() {
				document.getElementById('{$first}').onclick();
			});
			",$options = array('allowCache'=>false,'safe'=>true,'inline'=>false));
		?>		
		<?php foreach ($items as $key => $photo) {?>
			<?php
				$file = $fileUpload->image($photo['Upload']['name'],array('autoResize'=>true,'width'=>600,'imagePathOnly'=>true));		
			?>
			<?php echo $this->Html->link($this->Html->image($fileUpload->image($photo['Upload']['name'],array('autoResize'=>true,'width'=>$params['width'],'imagePathOnly'=>true))),$file,array('escape'=>false,'title'=>$photo['Upload']['name'],'id'=>'thumb'.$photo['Upload']['id'],'class'=>'highslide','onclick'=>'return hs.expand(this, inPageOptions)'))?>
		<?php }?>
		
		<?php }?>	 
	</div>  
</div> 
